<template>
  <div class="song">
    <NavBar />
    <div class="main">
      <el-row>
        <el-col :span="17">
          <div class="s_item">
            <div class="left">
              <div class="photo">
                <img :src="song.coverImgUrl" alt="">
              </div>
              <a href="#">生成外链播放器</a>
            </div>
            <div class="right">
              <div class="title">
                <i class="wyy wyy-danquxunhuan"></i>
                {{ song.name }}
              </div>
              <div class="intro">
                <img :src="song.avatarUrl" alt="">
                <span class="who">{{ song.nickname }}</span>
                <span class="time">{{ song.updateTime | time }}&nbsp;创建</span>
              </div>
              <div class="btn_wrap">
                <ul>
                  <li class="bofang">
                    <a href="javascript:;">
                    <i class="wyy wyy-bofang1"></i>
                    <span>播放</span>
                    <i class="el-icon-plus"></i>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                    <i class="el-icon-folder-add"></i>{{song.subscribedCount}}
                    </a>
                  </li>
                  <li>
                    <a href="#">
                    <i class="wyy wyy-fenxiang"></i>{{song.shareCount}}
                    </a>
                  </li>
                  <li>
                    <a href="#">
                    <i class="wyy wyy-xiazai"></i>{{song.playCount}}
                    </a>
                  </li>
                  <li>
                    <a href="#">
                    <i class="wyy wyy-xinxi"></i>{{song.commentCount}}
                    </a>
                  </li>
                </ul>
              </div>
              <div class="label" >
                <span>标签：</span>
                <el-button v-for="(item, index) in song.tags" :key="index">{{item}}</el-button>
              </div>
              <div class="bg">
                <span>介绍:</span>
                <p class="bg-max">
                  {{song.description}}
                </p>
              </div>
            </div>
          </div>
          <div class="music">
            <musicTab class="music-tab" :list="songList"></musicTab>
          </div>
        </el-col>
        <el-col :span="7" class="right_box">
          <div class="box">
            <div class="header">包含这首歌的歌单</div>
            <div class="container">
              <ul>
                <li>
                  <img src="http://p1.music.126.net/rCsLFXha6SLis0tV7yZ5fA==/109951165588539704.jpg?param=62y62" alt="">
                  <div class="text_box">
                    <p class="title">耳朵福利：百首好听宝藏热歌精选</p>
                    <p class="author"><span>by</span> 真咸鱼饼干</p>
                  </div>
                </li>
                <li>
                  <img src="http://p1.music.126.net/rCsLFXha6SLis0tV7yZ5fA==/109951165588539704.jpg?param=62y62" alt="">
                  <div class="text_box">
                    <p class="title">耳朵福利：百首好听宝藏热歌精选</p>
                    <p class="author"><span>by</span> 真咸鱼饼干</p>
                  </div>
                </li>
                <li>
                  <img src="http://p1.music.126.net/rCsLFXha6SLis0tV7yZ5fA==/109951165588539704.jpg?param=62y62" alt="">
                  <div class="text_box">
                    <p class="title">耳朵福利：百首好听宝藏热歌精选</p>
                    <p class="author"><span>by</span> 真咸鱼饼干</p>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getDetailMusicById } from '@/api/RankingList'
import musicTab from './components/musicTab'
import NavBar from '@/components/NavBar/index'
export default {
  name: 'Details',
  components: {
    NavBar,
    musicTab
  },
  data () {
    return {
      id: this.$route.params.id,
      songList: [],
      song: {}
    }
  },
  created () {
    this.getDetailMusicById()
  },
  methods: {
    async getDetailMusicById () {
      const { data } = await getDetailMusicById({
        id: this.id
      })
      console.log(data)
      this.songList = data.playlist.tracks
      console.log(this.songList)
      this.song.name = data.playlist.name
      this.song.coverImgUrl = data.playlist.coverImgUrl
      this.song.tags = data.playlist.tags
      this.song.nickname = data.playlist.creator.nickname
      this.song.avatarUrl = data.playlist.creator.avatarUrl
      this.song.shareCount = data.playlist.shareCount
      this.song.playCount = data.playlist.playCount
      this.song.commentCount = data.playlist.commentCount
      this.song.updateTime = data.playlist.updateTime
      this.song.description = data.playlist.description
      this.song.subscribedCount = data.playlist.subscribedCount
      console.log(this.song)
    }
  }
}
</script>

<style lang="less" scoped>
a{
text-decoration:none;
color:#333;
}
.song {
  .main {
    width: 980px;
    margin: 0 auto;
    border-left: 1px solid #cfcfcf;
    border-right: 1px solid #cfcfcf;
    .s_item {
      overflow: hidden;
      padding: 40px 0;
      .left {
        float: left;
        margin-right: 20px;
        float: left;
        width: 206px;
        height: 206px;
        text-align: center;
        .photo {
          border: 30px solid #222;
          border-radius: 50%;
          overflow: hidden;
        }
        a {
          font-size: 12px;
          color: #0c73c2;
        }
      }
      .right {
        width: 450px;
        float: left;
        .title {
              line-height: 24px;
              font-size: 20px;
              font-weight: normal;
          .wyy {
            color: #c20c0c;
          }
        }
        .intro {
          margin-top: 25px;
          height: 75px;
          img{
            width: 45px;
            height: 45px;
            float: left;
          }
          span {
            font-size: 14px;
            float: left;
            margin: 15px 0 5px 15px;
          }
          .who {
            color: #0c73c2;
          }
          .time {
            color: #888;
          }
        }
        .btn_wrap {
          width: 500px;
          height: 34px;
          ul {
            li {
              padding: 6px;
              margin-right: 5px;
              font-size: 13px;
              float: left;
              background-color: #FFFFFF;
              box-shadow: 2px 2px 2px #ccc;
              border: 1px solid #C4C4C4;
              border-radius: 4px;
              vertical-align: middle;
              span {
                margin-right: 5px;
                padding-right: 5px;
                border-right: 1px solid rgb(182, 181, 181);
              }
              i {
                font-size: 16px;
                margin-right: 5px;
              }
            }
            .bofang {
              background-color: #3F8ED8;
            }
          }
        }
        .label {
          margin-top: 10px;
          width: 500px;
          .el-button {
            padding: 5px;
          }
        }
        .bg {
          padding: 10px 0;
          font-size: 13px;
          color: #666;
        }
      }
    }
    .right_box {
      padding: 20px 40px 30px;
      height: 1000px;
      border-left: 1px solid #cfcfcf;
      .container {
        ul {
          li {
            width: 100%;
            height: 50px;
            margin-top: 15px;
            img {
              float: left;
              width: 50px;
              height: 50px;
            }
            .text_box {
              padding-left: 8px;
              float: left;
              p {
                width: 104px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-top: 5px;
              }
              .title {
                font-size: 12px;
              }
              .author {
                font-size: 12px;
                color: #666;
              }
            }
          }
        }
      }
    }
    // musictab模块
    .music-tab {
      margin: 0 10px;
      float: left;
    }
  }
}
</style>
